Chrome Extension 01 - 前言 + HelloWorld - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2019 iT 邦幫忙鐵人賽

DAY 1

Modern Web

弄點簡單的 Chrome Extension 讓生活更方便系列第 1 篇

Chrome Extension 01 - 前言 + HelloWorld

2019鐵人賽

givemin5

2018-10-16 10:14:12

2452 瀏覽

分享至

每天使用的瀏覽器最多的就是 Chrome，也裝了一大堆有的沒有的 Chrome Extension。
為了讓自己更熟悉 Chrome Extension，所以想要在 30 天做幾個可以縮短一些操作的 Chrome Extension ，提高一些工作效率。

先付上官方文件 : https://developer.chrome.com/extensions

相關資源 :

使用工具 Visual Studio Code : https://code.visualstudio.com/
免費圖庫 iconfinder : https://www.iconfinder.com/

Day 1 : Hello World

目標 :建立一個沒有功能，只會顯示 Hello World 的 Chrome Extension

檔案如下 :

manifest.json 檔案，定義應用程式的權限與相關設定
會有 3 個不同尺寸的 icon
popup.html 頁面，就是上面顯示 Hello World 的頁面

那我們就開始了 !

使用 Visual Studio Code 建立 manifest.json 檔案

{
    "manifest_version" : 2, //執行的版本，Chreome 18 以上版本使用 2
    "name" : "Hello World", //名稱
    "version" : "1.0", //當前版本
    "description" : "A hello world extension", //描述
    "icons":{ //icon
        "128" : "icon128.png",
        "48"  : "icon48.png",
        "16"  : "icon16.png"
    },
    "browser_action" :{ //瀏覽頁面
        "default_icon" : "icon16.png",
        "default_popup" : "popup.html"
    }
}

然後建立 popup.html
頁面 popup.html 就是顯示 Hello World 的部分，只是簡單的 HTML

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <title>Title Page</title>
    </head>
    <body>
        <h1 class="text-center">Hello World！</h1>
    </body>
</html>

icon16.png 等圖示部分，則直接去免費的 icon 圖庫下載，如 https://www.iconfinder.com/

最後，開啟 Chrome ，在 Chrome 瀏覽器的網址列輸入 chrome://extensions 進入擴充功能的管理頁面，選擇[載入未封裝項目]

選擇檔案所在資料夾後，便會被載入